import React, { Component } from "react";
import { 
    View, 
    Text, 
    Button, 
    Image,
    StyleSheet,
 } from "react-native";

class LogoTitle extends React.Component {
    render() {
        return (
            <Image
                source={require("./../img/ma.png")}
                style={{ width: 30, height: 30 }}
            />
        );
    }
}

class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        const params = navigation.state.params || {};

        return {
            headerTitle: <LogoTitle />,
            headerRight: (
                <Button
                    onPress={params.increaseCount}
                    title="+1"
                    color="#fff"
                />
            )
        };
    };

    componentWillMount() {
        this.props.navigation.setParams({ increaseCount: this._increaseCount });
    }

    state = {
        count: 0
    };

    _increaseCount = () => {
        this.setState({ count: this.state.count + 1 });
    };
    render() {
        //通过路由进行传参
        const { params } = this.props.navigation.state;
        const itemId = params ? params.itemId + 1 : null;
        const otherParam = params ? params.otherParam : null;
        // 当点击过快的时候，itemId任然是还未计算的值，但是页面屏幕增加了
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center"
                }}
            >
                <Text>Details Screen</Text>
                <Text>itemId: {JSON.stringify(itemId)}</Text>
                <Text>otherParam: {JSON.stringify(otherParam)}</Text>
                <Text>顶部title按钮控制状态：{this.state.count}</Text>
                <Button
                    title="Go to Details... again"
                    onPress={() =>
                        this.props.navigation.navigate("Details", {
                            itemId: itemId
                        })
                    }
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );
    }
}

export default DetailsScreen;